<template>
  <div class="vehicleTypeInfo-limit">
    <div>
      <el-select
        v-model="vehicleLimitData"
        filterable
        remote
        reserve-keyword
        :placeholder="parameter.promptTemplate"
        value-key="code"
        style="margin-right: 12px"
        :remote-method="(arg) => remoteMethodVehicle(arg, 1)"
        :loading="loadingVehicleLimit"
        @change="change('vehicleLimit')"
      >
        <el-option
          v-for="item in vehicleList"
          :key="item.code"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'vehicleTypeInfo',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [String, Array],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      vehicleLimitData: {},
      vehicleList: [],
      loadingVehicleLimit: false,
      rules: {
        vehicleTypeInfo: [
          {
            required: this.parameter.state === 4,
            validator: (rule, value, callback) => {
              if (this.parameter.state != 4 && this.parameter.fillFlag != 0) {
                callback()
                return
              }
              if (this.vehicleLimitData.code) {
                callback()
              } else {
                callback(new Error(this.$t('请选择车型')))
                return
              }
            },
            trigger: 'change',
            type: 'array',
          },
        ],
      },
    }
  },
  created() {
    if (this.value) {
      this.setData()
    }
    this.$emit('setrules', this.parameter, {
      [this.parameter.parameterNumber]: this.rules.vehicleTypeInfo,
    })
  },
  methods: {
    setData() {
      let value = JSON.parse(this.value)
      this.remoteMethodVehicle({
        code: value.vehicleCode,
        name: value.vehicleName,
      })
    },
    remoteMethodVehicle(query, sort) {
      if (query !== '') {
        this.loadingVehicleLimit = true
        nonStandardService
          .listVehicleTypePage({
            name: query.name ? query.name : query,
            pageNum: 1,
            pageSize: 99999,
            statusList: [1],
          })
          .then((res) => {
            this.vehicleList = res.data.list
            this.loadingVehicleLimit = false
            if (query.code) {
              this.vehicleLimitData = query
            }
          })
      } else {
        this.vehicleList = []
        this.loadingVehicleLimit = false
      }
    },
    getData() {
      return {
        vehicleCode: this.vehicleLimitData.code,
        vehicleName: this.vehicleLimitData.name,
      }
    },
    change() {},
  },
}
</script>
